<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <!-- 顶部区域 -->
      <a-col :span="24">
        <a-card>
          <div class="box-ver-hor-between">
            <div class="primary-color">付款申请</div>
            <div>
              <a-button type="primary" class="mr-20">修改</a-button>
              <a-button type="primary" class="mr-20">邀请修改</a-button>
              <a-button type="primary">申请付款</a-button>
            </div>
          </div>
          <div class="box-ver-hor-between">
            <div>
              <a-button type="link" @click="gotoPage('detail')">详情</a-button>
              <a-button type="link" @click="gotoPage('courseInformation')">课程信息</a-button>
              <a-button type="primary">付款申请</a-button>
              <a-button type="link" @click="gotoPage('curriculumEvaluation')">课程评价</a-button>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="24">
          <a-card>
            <a-row>
              <a-col :span="8"><div class="pay_n_btn allc">发起总金额：121231321</div></a-col>
              <a-col :span="8"><div class="pay_n_btn startc">已打款：121231321</div></a-col>
              <a-col :span="8"><div class="pay_n_btn endc">已关闭：121231321</div></a-col>
            </a-row>
            <!-- 列表 -->
            <pro-table
              ref="tableRef"
              :fetch="fetch"
              :columns="columns"
              :pagination="pagination"
            >
            </pro-table>
          </a-card>

      </a-col>
    </a-row>
  </page-layout>
</template>
<style scoped>
  .pay_n_btn{
    width: 80%;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    border-radius: 10px;
    text-align: center;
    background-color: #EDF1F2;
    font-size: 16px;
    font-weight: bold;
  }
  .allc{color: #FE623F;}
  .startc{color: #27B148;}
  .endc{color: #000;}
</style>
<script>
import {useRouter} from "vue-router"
import { tree, remove, removeBatch } from "@/api/module/dept";
export default{
  setup(){
    const router = useRouter();
    const gotoPage = (msg) => {
      router.push('/university/professor-manage/'+msg)
    }
    const columns = [
      { dataIndex: "money", key: "money", title: "费用" },
      { dataIndex: "moneymsg", key: "moneymsg", title:"付款说明" },
      { dataIndex: "moneytype", key: "moneytype", title: "币种"},
      { dataIndex: "moneynum", key: "moneynum", title: "金额"},
      { dataIndex: "chmoneynum", key: "chmoneynum", title: "人民币金额(元)"},
      { dataIndex: "type", key: "type", title: "状态"},
      { dataIndex: "starttime", key: "starttime", title: "发起时间"},
      { dataIndex: "endtime", key: "endtime", title: "处理时间"},
    ];
    const pagination = {
      Number: 1,
      total: 10,
    }
    /// 数据来源 [模拟]
    const fetch = async (param) => {
      var response = await tree(param);
      return {
        total: response.data.total,
        data: [{
          money : '经济学',
          moneymsg : '成都校区21312312',
          moneytype : '人民币',
          moneynum : '123123',
          chmoneynum : '213123',
          type : '审核中',
          starttime : '2019-08-09',
          endtime : '2021-03-02',
        }]
      };
    };
    return{
      gotoPage,
      columns,
      pagination,
      fetch,
    }
  }
}
</script>
